<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>json_board.jsp</title>
</head>
<style>
#result{
padding:5px;
width:300px;
border: 2px solid #aaaaaa;
}


</style>
<script>
var xhr;
var rs;
var url;
function init(){
	var btn=document.querySelector('#btnJB');
	rs= document.querySelector('#result');
	
	xhr= new XMLHttpRequest();
	

	btn.onclick=function(){
		 xhr.onreadystatechange=jsonBoardList;
		 
		 var inputF=document.querySelector('#find').value;
		 url= 'test.jsp?find='+inputF; 

		 xhr.open('get',url,true);

		 xhr.send();
	}
}

/* function goPage(page){
	var f=document.getElementById('find').value;

	var url='list_json.jsp?find='+f +'&nowPage='+page;
	
	xhr.open('get', url, true);//비동기 방식 형태로 xhr(XMLHttpRequest)을 실행 시키겠다
	xhr.send();
} */

function goPage(page){
	   var find = document.querySelector('#find').value;
	   var url = "test.jsp?find="+find+"&nowPage="+page;
	   
	   xhr.open("get", url, true);
	   xhr.send();
	}


function jsonBoardList(){
	if(xhr.readyState==4 && xhr.status==200){
		
		var obj=xhr.responseText;
		alert(obj);
		var s=obj.indexOf("<body>")+6;//잘라야할 위치
		var e=obj.lastIndexOf("</body>");
		var lastObj= obj.substring(s, e);
		

		eval(lastObj);//배열을 선언한 것과 같은 효과
		
		rs.innerHTML="";
		
		for (var i=0; i<jsonArray.length;i++){	
			rs.innerHTML+="MID : "+jsonArray[i].mid;
			rs.innerHTML+="SUBJECT : "+jsonArray[i].subject;
			rs.innerHTML+="MDATE : "+jsonArray[i].mdate;
			rs.innerHTML+="HIT : "+jsonArray[i].hit;
			rs.innerHTML+="<hr width=80% size=2px noshadow>";
		}	

 		if(Number(pageInfo.endPage)>2){

			rs.innerHTML += "<input type='button' value='Prev' onclick='goPage(" +(Number(pageInfo.endPage)-1) + ")'>";
		}

		
		for(var i=Number(pageInfo.startPage); i<=Number(pageInfo.endPage); i++){ 

			rs.innerHTML += "<input type='button' value='" +i+ "' onclick='goPage(" + i + ")'>" ;	
		}

		if(Number(pageInfo.endPage) < Number(pageInfo.totPage)){ 
			
			rs.innerHTML += "<input type='button' value='Next' onclick='goPage(" +(Number(pageInfo.endPage)+1) + ")'>";
		} 
	
		
	}	
}



</script>


<body>



<h1>JSON Board</h1>

<div>
<input type='text' id='find'>
<input type='button' value='JSON Board List' id='btnJB'>
</div>
<div id='result'></div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  



<script>init();</script>
</body>
</html>